import { Avatar, Space, Tag } from 'ant-design-vue';
import type { TableColumn } from '@/components/core/dynamic-table';
import { formatToDateTime } from '@/utils/dateUtil';
import { baseApiUrl } from '@/utils/request';
import helper from '@/utils/helper';
import { Gender,Values } from '@/enums'
import Api from "@/api/"; 
export type TableListItem = UserOut;
export type TableColumnItem = TableColumn<TableListItem>;
import AvatarImage from '@/components/AvatarImage.vue';
export const getAvatarUrl = (item: TableListItem) => {
  if (item.avatar == null)
    return item.gender == Gender.Male ? "icon/male.png" : "icon/female.png";
  return /^https?:\/\//.test(item.avatar) ? item.avatar : helper.toApiUrl(`file/download2?md5=${item.avatar}`);
};

export const baseColumns: TableColumnItem[] = [
  {
    title: '头像',
    width: 80,
    dataIndex: 'avatar',
    hideInSearch: true,
    customRender: ({ record }) => <AvatarImage size={50} src={getAvatarUrl(record)} />,
  },
  {
    title: '用户名',
    width: 120,
    dataIndex: 'userName',
    hideInSearch: true,
  },
  {
    title: '真实名',
    width: 120,
    hideInSearch: true,
    dataIndex: 'realName',
  },
  {
    title: '所在部门',
    dataIndex: 'dept',
    hideInSearch: true,
    width: 180,
    customRender: ({ record }) => {
      return <Tag>{record.deptName}</Tag>;
    },
  },
  {
    title: '所属角色',
    dataIndex: 'roleNames',
    hideInSearch: true,
    width: 220,
    customRender: ({ record }) => (
      <Space>
        {
          record.roles?.map((item) => (
            <Tag color={'success'} key={String(item.id || item.name)}>
              {item.name}
            </Tag>
          ))
        }
      </Space>
    ),
  },
  {
    title: '手机',
    width: 120,
    dataIndex: 'mobile',
    hideInSearch: true,
  },
  {
    title: '邮箱',
    width: 160,
    dataIndex: 'email',
    hideInSearch: true,
  },
  {
    title: '状态',
    dataIndex: 'active',
    width: 100,
    hideInSearch: true,
    formItemProps: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '启用',
            value: 'true',
          },
          {
            label: '禁用',
            value: 'false',
          },
        ],
      },
    },
    customRender: ({ record }) => {
      const isEnable = record.active;
      return <Tag color={isEnable ? 'success' : 'red'}>{isEnable ? '启用' : '禁用'}</Tag>;
    },
  },
  {
    title: '性别',
    width: 120,
    hideInSearch: true,
    dataIndex: 'gender',
    customRender: ({ record }) => {
      return <Tag color={Values.Gender[record.gender].color}>{Values.Gender[record.gender].desc}</Tag>;
    },
  },
  {
    title: '创建时间',
    dataIndex: 'creatTime',
    width: 120,
    hideInSearch: true,
    customRender: ({ record }) => {
      return formatToDateTime(record.creatTime);
    },
  },
  {
    title: '修改时间',
    dataIndex: 'updateTime',
    width: 120,
    hideInSearch: true,
    customRender: ({ record }) => {
      return formatToDateTime(record.updateTime);
    },
  },
];
